<template>
  <div class="subordinateUnit">
    <cus-search style="min-width: 1000px">
      <cus-search-item>
        <Form
          :model="form"
          ref="formValidate"
          :label-width="80"
          @keydown.native.enter.prevent="
            pages.page = 1;
            onInit();
          "
        >
          <FormItem class="mr_48 mb_20" label="菜肴名称" prop="name">
            <Input
              v-trim
              v-model="form.dishName"
              style="width: 200px"
              placeholder="请填写菜肴名称"
              clearable
            ></Input>
          </FormItem>
          <FormItem class="mr_48 mb_20" label="起止日期" prop="dateString">
            <el-date-picker
              v-model="form.dateString"
              type="week"
              format="yyyy 第 WW 周"
              placeholder="选择周"
              @change="weekChange"
              style="width: 200px"
              :picker-options="{ firstDayOfWeek: 1 }"
            >
            </el-date-picker>
          </FormItem>

          <cusButton
            class="mr_10"
            type="primary"
            @onClick="
              pages.page = 1;
              onInit();
            "
            >查询</cusButton
          >
          <cusButton class="mr_10" type="success" @onClick="gotoOrder">点菜</cusButton>
          <cusButton class="mr_10" type="default" @onClick="resetFilter">重置</cusButton>
        </Form>
      </cus-search-item>
    </cus-search>
    <div class="contentBox mt_20">
      <Spin size="large" fix v-if="form.loading"> </Spin>
      <div
        class="cookBox"
        v-for="(item, index) in data"
        :key="index"
        :style="{ marginTop: index == 0 ? '' : '9px' }"
      >
        <div class="cookBox-title">
          {{ item.weekStartTime }} — {{ item.weekStopTime }}
        </div>
        <div class="cookBox-itembox">
          <div
            class="cookBox-itembox-item bookItem"
            v-for="(it, idx) in item.orderDishList"
            :key="idx"
          >
            <div class="bookItem-top">
              <div class="bookItem-top-title">{{ it.dishName }}</div>
              <div class="bookItem-top-date"></div>
              <div class="bookItem-top-line"></div>
              <div class="bookItem-top-tags">
                <Tag style="margin-right: 8px" color="blue">{{ it.orderTime }}</Tag>
                <Tag style="margin-right: 8px" color="blue">{{
                  it.week | weekName()
                }}</Tag>
                <Tag style="margin-right: 8px" color="blue">{{ it.mealTimes }}</Tag>
              </div>
              <div class="bookItem-top-imgBox">
                <div style="width: 100%; height: 180px; margin-bottom: 10px">
                  <img :src="it.dishImg" alt="" v-if="it.dishImg" />
                  <div
                    v-else
                    style="
                      width: 100%;
                      height: 100%;
                      display: flex;
                      align-items: center;
                      justify-content: center;
                      color: white;
                      background: gray;
                    "
                  >
                    暂无菜肴图片
                  </div>
                </div>
              </div>
            </div>
            <div class="bookItem-bottom2">
              <div style="border-right: 1px solid #dddddd" @click="onDetail(it)">
                <Icon type="ios-search" color="rgba(24, 144, 255, 1)" size="18" />
                <span style="margin-left: 3px">查看</span>
              </div>

              <div v-if="it.auditState != 1">
                <Poptip
                  confirm
                  title="是否确认删除该已点菜肴？"
                  width="230"
                  @on-ok="onDelete(it)"
                >
                  <div class="tipBox">
                    <Icon type="ios-trash" color="red" size="18" />
                    <span style="margin-left: 3px; color: red">删除</span>
                  </div>
                </Poptip>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div
        style="color: gray; text-align: center; padding: 100px 0; font-size: 20px"
        v-if="data.length == 0"
      >
        暂无数据
      </div>
    </div>
    <div class="fixedBox">
      <div class="pageBox">
        <cus-page
          :data="pages"
          :showElevator="false"
          @pageChange="selectOrderDishApi"
        ></cus-page>
      </div>
    </div>
    <!-- 营养标签 -->
    <dishesTags ref="dishesTags"></dishesTags>
  </div>
</template>
<script>
import { selectOrderDish, deleteOrderDish } from "@/api/business/dishesModule";
import dishesTags from "./components/dishesTags";

export default {
  components: { dishesTags },
  watch: {
    // 如果路由发生变化，再次执行该方法
    $route: "onInit",
  },
  data() {
    return {
      form: {
        loading: false,
        dishName: "",
        dateString: "",
        isCommonly: -1,
        auditState: -1,
        begindate: "",
        enddate: "",
      },
      dateList: [], // 一周日期集合
      data: [], //Table列表数据
      tableHeight: 0, // Table表格默认高度
      pages: {
        page: 1,
        pageSize: 10,
        pageTotal: 0,
      },
      showCheck: false,
      socialList: ["粮食", "植物油", "调料"],
      social: ["植物油", "调料"],
      selectMealPlanIdList: [],
      selectFoodBookList: [],
    };
  },
  filters: {
    weekName(week) {
      let name = "";
      if (week == "one") {
        name = "星期一";
      }
      if (week == "two") {
        name = "星期二";
      }
      if (week == "three") {
        name = "星期三";
      }
      if (week == "four") {
        name = "星期四";
      }
      if (week == "five") {
        name = "星期五";
      }
      if (week == "six") {
        name = "星期六";
      }
      if (week == "seven") {
        name = "星期天";
      }
      return name;
    },
  },
  mounted() {
    window.addEventListener("resize", this.getTableHeight);
    this.getTableHeight();
    this.selectOrderDishApi();
  },
  methods: {
    //设置Table表头高度自适应
    getTableHeight() {
      this.tableHeight = window.innerHeight - 209;
    },
    onInit() {
      this.selectOrderDishApi();
    },
    // 删除接口
    onDelete({ id }) {
      deleteOrderDish({
        orderDishId: id,
      }).then((res) => {
        if (res.retCode == 2000) {
          this.$Message.success("删除成功.");
          this.selectOrderDishApi();
          resolve();
        }
      });
    },
    // 前往明细
    gotoOrder() {
      this.$router.push({
        path: `/createHandmade/orderDishesPage`,
      });
    },
    resetFilter() {
      this.pages.page = 1;
      this.pages.pageSize = 10;
      this.form.dishName = "";
      this.form.dateString = "";
      this.form.begindate = "";
      this.form.enddate = "";
      this.onInit();
    },
    // 获取列表接口 --接口
    selectOrderDishApi() {
      return new Promise((resolve) => {
        let params = {
          current: this.pages.page,
          size: this.pages.pageSize,
          dishName: this.form.dishName,
          startDate: this.form.begindate,
          stopDate: this.form.enddate,
        };
        this.form.loading = true;
        selectOrderDish(params).then((res) => {
          this.form.loading = false;
          if (res.retCode == 2000) {
            this.data = res.data.records;
            this.pages.pageTotal = res.data.total;
            resolve();
          }
        });
      });
    },
    //时间week事件
    weekChange(date) {
      console.log(date);
      if (date) {
        this.getCurrentWeek(date);
      } else {
        this.form.begindate = "";
        this.form.enddate = "";
      }
      this.onInit();
    },
    // 获取本周日期组件处理
    getCurrentWeek(date) {
      let nowData = new Date(date); //传入时间参数,如 2021-11-09 获取给定日期所属的周 日期
      let currentDay = nowData.getDay();
      if (currentDay == 0) {
        currentDay = 7;
      }
      let beforweek = [],
        afterWeek = [];
      for (let i = 1; i <= 7; i++) {
        if (currentDay - i >= 0) {
          let DayTime = nowData.getTime() - (currentDay - i) * 24 * 60 * 60 * 1000;
          beforweek.push(new Date(DayTime).Format("yyyy-MM-dd"));
        } else {
          let DayTime = nowData.getTime() + (8 - i) * 24 * 60 * 60 * 1000;
          afterWeek.push(new Date(DayTime).Format("yyyy-MM-dd"));
        }
      }
      afterWeek = afterWeek.reverse();
      let dateList = [...beforweek, ...afterWeek];
      if (dateList.length) {
        this.form.begindate = `${dateList[0]}`;
        this.form.enddate = `${dateList[dateList.length - 1]}`;
      }
    },
    // 营养标签
    onDetail(row) {
      this.$refs["dishesTags"].form.dishCode = row.dishCode;
      this.$refs["dishesTags"].form.dishName = row.dishName;
      this.$refs["dishesTags"].show();
    },
  },
};
</script>

<style lang="less" scoped>
/*里面的代码可以根据自己需求去进行更改*/
/* 设置滚动条的样式 */
::-webkit-scrollbar {
  width: 6px;
}
/* 滚动槽 */
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);
  border-radius: 10px;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
  background: rgba(255, 255, 255, 0.4);
}
.subordinateUnit {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.contentBox {
  flex: 1;
  // background: green;
  overflow-y: auto;
  overflow-x: hidden;
  // background: #FFFFFF;
  border-radius: 4px;
  padding-bottom: 100px;
}
.mr_48 {
  margin-right: 48px;
}
.fixedBox {
  position: fixed;
  right: 28px;
  bottom: 20px;
  background: #ffffff;
  border-radius: 4px;
  display: flex;
}

.pageBox {
  padding: 0 20px 20px 20px;
  box-shadow: 0px 2px 5px 2px rgba(0, 0, 0, 0.09), 0px 0px 2px 0px rgba(0, 0, 0, 0.12),
    0px 0px 1px -1px rgba(0, 0, 0, 0.16);
  border-radius: 6px;
}

.cookBox {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  background: #ffffff;
  border-radius: 6px;
  box-shadow: 0px 4px 8px 0px rgba(108, 137, 165, 0.18);
  overflow: hidden;
  &-title {
    height: 65px;
    line-height: 65px;
    padding: 0 26px;
    font-size: 18px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.85);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
  }
  &-itembox {
    padding: 20px 24px 0;
    display: flex;
    flex-wrap: wrap;
  }
}

.bookItem {
  width: 352px;
  background: #ffffff;
  box-shadow: 0px 1px 2px -2px rgba(0, 0, 0, 0.16);
  border-radius: 4px;
  border: 1px solid #dddddd;
  margin: 0 30px 20px 0;
  position: relative;
  cursor: pointer;
  &-top {
    padding: 20px 20px 0 20px;
    border-bottom: 1px solid #ebebeb;
    &-title {
      height: 25px;
      font-size: 18px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.65);
      line-height: 25px;
      overflow: hidden;
      margin-bottom: 2px;
      border: none !important;
    }
    &-date {
      height: 10px;
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.45);
      line-height: 10px;
      overflow: hidden;
    }
    &-line {
      height: 1px;
      background: rgba(0, 0, 0, 0.06);
    }
    &-tags {
      display: flex;
      padding: 9px 0;
    }
    &-imgBox {
      height: 190px;
      position: relative;
      img {
        width: 100%;
        height: 100%;
        vertical-align: middle;
      }
      &-tag {
        position: absolute;
        cursor: pointer;
        left: 0;
        top: 0;
        padding: 8px;
        display: flex;
        align-items: center;
        background: rgba(0, 0, 0, 0.62);
        border-radius: 0px 0px 2px 0px;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
        span {
          margin-left: 2px;
        }
      }
    }
    &-priceBox {
      margin-top: 8px;
      margin-bottom: 15px;
      height: 17px;
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.45);
      line-height: 17px;
    }
  }
  &-bottom {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 47px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #1890ff;
    cursor: pointer;
  }
  &-bottom:hover {
    background: rgba(0, 0, 0, 0.06);
  }
  &-shenhe {
    width: 30px;
    height: 60px;
    position: absolute;
    top: 0;
    right: 20px;
    background-image: url("../assets/shenhe.png");
    background-size: 100% 100%;
    cursor: pointer;
  }
  &-bottom2 {
    height: 47px;
    display: flex;
    justify-content: space-between;
    cursor: pointer;
    div {
      flex: 1;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(24, 144, 255, 1);
    }
    div:hover {
      background: rgba(0, 0, 0, 0.06);
    }
  }
}

.bookItem:hover {
  box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.12), 0px 1px 2px -2px rgba(0, 0, 0, 0.16);
}
.tipBox {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
/deep/ .ivu-poptip-rel {
  width: 100% !important;
  height: 100% !important;
}

.buyBox {
  width: 60px;
  height: 60px;
  box-shadow: 0px 2px 5px 2px rgba(0, 0, 0, 0.09), 0px 0px 2px 0px rgba(0, 0, 0, 0.12),
    0px 0px 1px -1px rgba(0, 0, 0, 0.16);
  border-radius: 4px;
  margin-right: 9px;
  background: linear-gradient(151deg, #64b8ff 0%, #074fd0 100%);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  cursor: pointer;
  div {
    width: 100%;
    div {
      width: 100%;
      text-align: center;
      font-weight: 500;
      color: #ffffff;
    }
  }
}

.checkBox {
  height: 60px;
  background: #ffffff;
  border-radius: 4px;
  margin-right: 9px;
  display: flex;
  align-items: center;
  padding: 10px 10px 10px 20px;
  box-shadow: 0px 2px 5px 2px rgba(0, 0, 0, 0.09), 0px 0px 2px 0px rgba(0, 0, 0, 0.12),
    0px 0px 1px -1px rgba(0, 0, 0, 0.16);
  border-radius: 4px;
}

.selectItem {
  border: 1px solid #4f95ff;
  color: #4f95ff !important;
}
</style>
